<template>
  <div :class="classes">
    <slot></slot>
  </div>
</template>
<script>
import { getCurrentInstance } from 'vue'
import { oneOf } from '../../utils/assist'
import mixinsForm from '../../mixins/form'
const prefixCls = 'haloe-checkbox-group'

export default {
  name: 'CheckboxGroup',
  mixins: [mixinsForm],
  emits: ['update:modelValue', 'on-change'],
  provide() {
    return {
      CheckboxGroupInstance: this,
    }
  },
  props: {
    modelValue: {
      type: Array,
      default() {
        return []
      },
    },
    size: {
      validator(value) {
        return oneOf(value, ['small', 'large', 'default'])
      },
      default() {
        const global = getCurrentInstance().appContext.config.globalProperties;
        return !global.$HALOE || global.$HALOE.size === '' ? 'default' : global.$HALOE.size;
      },
    },
    type: {
      validator (value) {
        return oneOf(value, ['button']);
      }
    },
    buttonStyle: {
      validator (value) {
        return oneOf(value, ['default', 'solid']);
      },
      default: 'default'
    }
  },
  data() {
    return {
      currentValue: this.modelValue || [],
      children: [],
    }
  },
  computed: {
    classes() {
      return [
        `${prefixCls}`,
        {
          [`haloe-checkbox-${this.size}`]: !!this.size,
          [`${prefixCls}-${this.type}`]: !!this.type,
          [`${prefixCls}-button-${this.buttonStyle}`]: this.type === 'button' && this.buttonStyle !== 'default',
        },
      ]
    },
  },
  methods: {
    change(data) {
      this.currentValue = data
      this.$emit('update:modelValue', data)
      this.$emit('on-change', data)
      this.handleFormItemChange('change', data)
    },
  },
}
</script>
